<template>
  <el-container>
    <el-header class="header">
      <section class="logo">
        <h1>叩丁狼电商运营平台</h1>
        <el-icon>
          <Menu />
        </el-icon>
      </section>
      <section class="user-info">
        <el-dropdown @command="commandHandle">
          <span class="el-dropdown-link">
            {{ store.state.username }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="index">首页</el-dropdown-item>
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </section>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <!-- 如果el-menu启用router模式，会在点击menu-item和sub-menu的时候，找到它们的index，进行跳转 -->
        <el-menu
          active-text-color="#ffd04b"
          background-color="#304156"
          class="el-menu-vertical-demo"
          :default-active="activeRoute"
          text-color="#fff"
          :router="true"
          :unique-opened="true"
        >
          <!-- 添加一个用于跳转到首页的导航 -->
          <el-menu-item index="/index">
            <i class="iconfont homepage"></i>
            <span>首页</span>
          </el-menu-item>
          <!-- 一级菜单 -->
          <el-sub-menu :index="`/${pMenu.name}`" v-for="pMenu in menus" :key="pMenu.id">
            <template #title>
              <i class="iconfont" :class="pMenu.icon"></i>
              <span>{{ pMenu.title }}</span>
            </template>
            <!-- 二级菜单 -->
            <!-- 二级菜单，对应的路由 应该是： /父/子 -->
            <el-menu-item
              :index="`/${pMenu.name}/${sub.name}`"
              v-for="sub in pMenu.children"
              :key="sub.id"
            >
              <i class="iconfont" :class="sub.icon"></i>
              <span>{{ sub.title }}</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
// 把store得到
import { computed, ref, watchEffect } from 'vue';
import { useStore } from 'vuex';
import { Menu } from '@element-plus/icons-vue'
// 得到当前激活的路由
import { useRoute, useRouter } from 'vue-router'
import { SET_USER_MENU } from '@/store/contant';
import { LogoutApi } from '@/request/api';
import { ElMessage } from 'element-plus';
import { ArrowDown } from '@element-plus/icons-vue';
const store = useStore<IState>()
const route = useRoute()
const router = useRouter()

const menus = computed(() => store.getters['computedMenus'] as IMenuModel[]);
const activeRoute = ref('/index')
watchEffect(() => {
  activeRoute.value = route.path
})
const commandHandle = (cmd: string | number | object) => {
  // 判断cmd 是什么，做对应的事情
  if (cmd === 'logout') {
    // 退出登录
    // 先向服务器申请退出
    LogoutApi().then(res => {
      // console.log(res);
      if (res.code === 200) {
        // 删除token
        localStorage.removeItem('token')
        // 把路由清空
        const menus = store.getters['computedMenus'] as IMenuModel[]
        menus.forEach(item => {
          router.removeRoute(item.name);
        })
        // 清空vuex的数据
        store.commit(SET_USER_MENU, [])
        store.commit('setUserName', '')
        // 跳转到login
        router.push('/login')
      } else {
        ElMessage.error(res.message)
      }
    })

  }
}
</script>
 
<style lang="less" scoped>
.el-header {
  background-color: #409eff;
  height: 70px;
}
.el-aside {
  background-color: #304156;
  height: calc(100vh - 70px);
  // css3的一个控制滚动条的属性
  &::-webkit-scrollbar {
    width: 0;
  }
}
.logo {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.header {
  display: flex;
  justify-content: space-between;
  .user-info {
    display: flex;
    align-items: center;
    .el-dropdown-link {
      color: #fff;
    }
  }
}
.el-main {
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  overflow-x: hidden;
  &::-webkit-scrollbar {
    width: 0;
  }
}
</style>